import { useState } from 'react'
import './yuyue.scss'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { RightOutlined } from '@ant-design/icons'

function Yuyue() {
    const navigate = useNavigate()
    const [activeTab, setActiveTab] = useState('pending')
    return (
        <div className='yuyue'>
            <div className='yuyue-top'>
                <span><LeftOutline className='yuyue-top-left' onClick={() => navigate(-1)} /></span>
                <span className='yuyue-top-title'>预约</span>
            </div>
            <div className='yuyue-bg'>
                <div className='yuyue-bg-one'>
                    <span className='yuyue-bg-one-title'>王小美</span>
                    <span className='yuyue-bg-one-text'>2456****233</span>
                    <span className='yuyue-bg-one-text-two'>切换</span>
                </div>
            </div>
            <div className='yuyue-bg-two'>
                <div 
                    className={`yuyue-bg-two-one ${activeTab === 'pending' ? 'active' : ''}`}
                    onClick={() => setActiveTab('pending')}
                >
                    待预约
                </div>
                <div 
                    className={`yuyue-bg-two-two ${activeTab === 'booked' ? 'active' : ''}`}
                    onClick={() => setActiveTab('booked')}
                >
                    已预约
                </div>
            </div>
            
            {activeTab === 'pending' && (
                <div className='yuyue-content'>
                    <div className='yuyue-card'>
                        <div className='yuyue-card-content'>
                            <div className='yuyue-card-title'>双肾及肾血管彩色多普勒</div>
                            <div className='yuyue-card-time'>开单时间 2020-01-01 10:20:36</div>
                        </div>
                        <div className='yuyue-card-action'>去预约{<RightOutlined />}</div>
                    </div>
                    
                    <div className='yuyue-card'>
                        <div className='yuyue-card-content'>
                            <div className='yuyue-card-title'>上腹部CT平扫</div>
                            <div className='yuyue-card-time'>开单时间 2020-01-01 10:20:36</div>
                        </div>
                        <div className='yuyue-card-action'>去预约{<RightOutlined />}</div>
                    </div>
                </div>
            )}
            
            {activeTab === 'booked' && (
                <div className='yuyue-content'>
                    <div className='yuyue-appointment-card'>
                        <div className='yuyue-card-header'>
                            <div className='yuyue-card-left'>
                                <div className='yuyue-card-bar'></div>
                                <div className='yuyue-card-title'>双肾及肾血管彩色多普勒</div>
                                <RightOutlined className='yuyue-card-arrow' />
                            </div>
                            <div className='yuyue-status-tag pending'>待检查</div>
                        </div>
                        <div className='yuyue-card-details'>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>预约医院</span>
                                <span className='yuyue-detail-value'>四川省保健院南苑</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>就诊患者</span>
                                <span className='yuyue-detail-value'>王小美</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>检查诊室</span>
                                <span className='yuyue-detail-value'>CT诊室一</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>预约时间</span>
                                <span className='yuyue-detail-value'>2020-01-01 08:30-09:30</span>
                            </div>
                        </div>
                        <div className='yuyue-card-actions'>
                            <button className='yuyue-action-btn'>改签</button>
                            <button className='yuyue-action-btn cancel'>取消预约</button>
                        </div>
                    </div>
                    
                    <div className='yuyue-appointment-card'>
                        <div className='yuyue-card-header'>
                            <div className='yuyue-card-left'>
                                <div className='yuyue-card-bar'></div>
                                <div className='yuyue-card-title'>双肾及肾血管彩色多普勒</div>
                                <RightOutlined className='yuyue-card-arrow' />
                            </div>
                            <div className='yuyue-status-tag cancelled'>已取消</div>
                        </div>
                        <div className='yuyue-card-details'>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>预约医院</span>
                                <span className='yuyue-detail-value'>四川省保健院南苑</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>就诊患者</span>
                                <span className='yuyue-detail-value'>王小美</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>检查诊室</span>
                                <span className='yuyue-detail-value'>CT诊室一</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>预约时间</span>
                                <span className='yuyue-detail-value'>2020-01-01 08:30-09:30</span>
                            </div>
                        </div>
                    </div>
                    
                    <div className='yuyue-appointment-card'>
                        <div className='yuyue-card-header'>
                            <div className='yuyue-card-left'>
                                <div className='yuyue-card-bar'></div>
                                <div className='yuyue-card-title'>双肾及肾血管彩色多普勒</div>
                                <RightOutlined className='yuyue-card-arrow' />
                            </div>
                            <div className='yuyue-status-tag completed'>已检查</div>
                        </div>
                        <div className='yuyue-card-details'>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>预约医院</span>
                                <span className='yuyue-detail-value'>四川省保健院南苑</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>就诊患者</span>
                                <span className='yuyue-detail-value'>王小美</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>检查诊室</span>
                                <span className='yuyue-detail-value'>CT诊室一</span>
                            </div>
                            <div className='yuyue-detail-row'>
                                <span className='yuyue-detail-label'>预约时间</span>
                                <span className='yuyue-detail-value'>2020-01-01 08:30-09:30</span>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}

export default Yuyue